<template>
  <el-drawer
    v-model="drawerDialog"
    :before-close="handleClose"
    direction="rtl"
    class="demo-drawer"
    :size="size"
  >
    <template #header>
      <h4>{{ title }}</h4>
    </template>
    <!-- 表头搜索内容 -->
    <template #default>
      <div class="search-common" v-if="hasSearch">
        <el-input
          v-model="input3"
          style="max-width: 400px;float: right;margin-bottom: 20px;"
          placeholder="请输入想要搜索的内容"
          class="input-with-select"
          clearable
        >
          <template #prepend>
            <el-select
              v-model="inputSearchInfo"
              placeholder="Select"
              style="width: 115px"
            >
              <el-option label="Restaurant" value="1" />
              <el-option label="Order No." value="2" />
              <el-option label="Tel" value="3" />
              <!-- 改成for循环 -->
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
          <template #append>
            <el-button round :icon="Search" @click="search" />
          </template>
        </el-input>
      </div>
      <!--表格 -->
      <div class="demo-drawer__content" v-if="drawerType == 'table'">
        <el-table :data="gridData">
          <el-table-column type="selection" width="55" />
          <el-table-column property="venueName" label="场地名" width="150" />
          <el-table-column
            property="affiliatedUnit"
            label="所属单位"
            width="200"
          />
          <el-table-column property="capacity" label="容纳人数" width="120" />
          <el-table-column property="contacts" label="联系人" width="120" />
          <el-table-column property="phone" label="电话" width="120" />
          <el-table-column property="state" label="状态" width="120" />
        </el-table>
        <!-- 组件内容溢出提示 -->
        <div class="tips">
          友情提示：当内容过多的时候，请将鼠标移入表格底部左右拖动滚动条展示溢出内容！
        </div>
        <el-divider border-style="dotted" style="margin: 10px 0" />
        <!-- 表格的分页 不用分页组件稍微麻烦 -->
        <el-pagination
          class="demo-drawer__pagination"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :size="paginationSize"
          :background="background"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 表单 -->
      <div class="demo-drawer__content" v-if="drawerType == 'form'">
        <el-form :model="form">
          <el-form-item label="Name" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="Area" :label-width="formLabelWidth">
            <el-select
              v-model="form.region"
              placeholder="Please select activity area"
            >
              <el-option label="Area1" value="shanghai" />
              <el-option label="Area2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 审批 -->
      <div class="demo-drawer__content" v-if="drawerType == 'approval'">
        <el-descriptions
          title="Width vertical list"
          direction="vertical"
          border
          style="margin-top: 20px"
        >
          <el-descriptions-item
            :rowspan="2"
            :width="140"
            label="Photo"
            align="center"
          >
            <el-image
              style="width: 100px; height: 100px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </el-descriptions-item>
          <el-descriptions-item label="Username"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="Telephone"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
          <el-descriptions-item label="Remarks">
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="Address">
            No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">
          {{ loading ? "确定 ..." : "确定" }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { reactive, ref, toRefs, defineEmits, defineProps } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElDrawer, ElMessageBox } from "element-plus";
//引入組件
import CommonSearch from "./commonSearch.vue";
// 搜索框是否显示
const isShowKey = ref("practicalTraining-default");
// 接受父组件传递的值
const props = defineProps({
  drawerDialog: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "title",
  },
  size: {
    type: String,
    default: "30%",
  },
  drawerType: {
    type: String,
    default: "form",
  },
  hasSearch: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSize: {
    type: Number,
    default: 15,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  gridData: {
    type: Array,
    default: () => [],
  },
});
const { drawerDialog, title, size, drawerType, total, pageSize, currentPage,hasSearch } =
  toRefs(props);
// 定义事件
const emit = defineEmits(["closeDrawer", "currentPageChange", "submitDrawer"]);

//分页开始
const background = ref(true);
const paginationSize = ref("default");
const handleCurrentChange = (val) => {
  currentPage.value = val;
  emit("currentPageChange", val);
};

//分页结束

//将接受的值解析出去
const formLabelWidth = "80px";
let timer;

//抽屉参数
const table = ref(false);
const dialog = ref(true);
const loading = ref(false);

const form = ref({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const gridData = [
  // 根据表格中的label来定义
  {
    venueName: "B512大教室",
    affiliatedUnit: "计算机学院",
    capacity: "100",
    contacts: "张三",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "海南大学",
    capacity: "100",
    contacts: "张里斯",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
];

// 关闭弹框
const handleClose = () => {
  emit("closeDrawer");
};
const cancelForm = () => {
  loading.value = false;
  emit("closeDrawer");
};

// 点击确定
const onClick = () => {
  if (loading.value) {
    return;
  }
  ElMessageBox.confirm("您确定要提交相关内容吗?")
    .then(() => {
      loading.value = true;
      timer = setTimeout(() => {
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false;
          emit("submitDrawer", form.value);
          clearTimeout(timer);
        }, 400);
      }, 600);
    })
    .catch(() => {
    });
};
</script>

<style lang="scss" scoped>
.demo-drawer {
  position: relative;
}
.demo-drawer__footer {
  position: absolute;
  margin-top: 20px;
  right: 20px;
  bottom: 20px;
}
.demo-drawer__pagination {
  margin-top: 10px;
  float: right;
}
.tips {
  margin-top: 10px;
  font-size: 12px;
  color: #ff0000;
}
// 独立样式
.input-with-select:deep(.el-input-group) {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
}
.input-with-select:deep(.el-input-group__prepend) {
  border-radius: 18px 0 0 18px;
}
.input-with-select:deep(.el-input-group__append) {
  border-radius: 0 18px 18px 0;
}
.input-with-select:deep(.el-select__wrapper) {
  border-radius: 18px 0 0 18px;
}
.input-with-noSelect:deep(.el-input__wrapper) {
  border-radius: 18px 0px 0px 18px;
}
.input-with-noSelect:deep(.el-input-group__append) {
  border-radius: 0 18px 18px 0;
}
</style>
<style lang="scss">
.el-drawer__body {
  overflow: auto;
  padding: 20px;
}
.el-drawer__header {
  margin-bottom: 20px;
}
</style>
